<template>
	<header>
		<div class = "back">
			<span class = "iconfont">&#xe624;</span>
		</div>
		<div class = "search">
			<span class = "iconfont">&#xe632;</span>
			请输入城市/景点/游玩主题
		</div>
		<router-link to = "/city">
			<div class = "city">
				{{this.city}}
				<span class = "iconfont">&#xe64a;</span>
			</div>
		</router-link>
	</header>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
		name : 'homeHeader',
		computed: {
			...mapState(["city"])
		}
	}
</script>
<style lang = "less" scoped>
	/*
		import 前加@
		@符号前加~
		尾部加;
	*/
	@import '~css/variable.less';
	
	header {
		height:@headerHeight;
		line-height:@headerHeight;
		background:@bgColor;
		display: flex;
		color:#fff;
		.back {
			width:.8rem;
			float:left;
			text-align: center;
		}
		.search {
			flex:1;
			height:.68rem;
			line-height:.68rem;
			background: #fff;
			border-radius:.1rem;
			margin-top:.1rem;
			color:#ccc;
			text-align: left;
			padding-left:.2rem;
			font-size:.24rem;
		}
		.city {
			min-width: 1rem;
			padding:0 .1rem;
			text-align: center;
			float: right;
			color:#fff;
			span {
				font-size:.24rem;
				margin-left:-.04rem;
			}
		}
	}
</style>